<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('代办提醒类型')" prop="reminderType">
            <dictSelect
              v-model="form.reminderType"
              dictionary="wf_act_model_reminder_type"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('通知方式')" prop="noticeMode">
            <el-checkbox-group v-model="form.noticeMode" @change="noticeModeChange">
              <el-checkbox
                v-for="(dict, index) in noticeModeOptions"
                :key="index"
                :label="dict.dictValue"
                border
              >{{ $t(dict.dictLabel) }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('XTTX')" :span="12">
          <el-form-item :label="$t('系统通知标题')" prop="systemNoticeTitle">
            <el-input v-model="form.systemNoticeTitle" :placeholder="$t('系统通知标题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('XTTX')" :span="24">
          <el-form-item :label="$t('系统通知内容')" prop="systemNoticeContent">
            <EditorTxt v-model="form.systemNoticeContent" :height="400" />
            <!--<el-input v-model="form.systemNoticeContent" type="textarea" :placeholder="请输入内容" :autosize="{minRows: 3, maxRows: 20}" show-word-limit maxlength="1000" />-->
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('EMAIL')" :span="12">
          <el-form-item :label="$t('邮件通知标题')" prop="mailNoticeTitle">
            <el-input v-model="form.mailNoticeTitle" :placeholder="$t('邮件通知标题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('EMAIL')" :span="24">
          <el-form-item :label="$t('邮件通知内容')" prop="mailNoticeContent">
            <EditorTxt v-model="form.mailNoticeContent" :height="400" />
            <!--<el-input v-model="form.mailNoticeContent" type="textarea" :placeholder="请输入内容" :autosize="{minRows: 3, maxRows: 20}" show-word-limit maxlength="1000" />-->
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('APP')" :span="12">
          <el-form-item :label="$t('App通知标题')" prop="appNoticeTitle">
            <el-input v-model="form.appNoticeTitle" :placeholder="$t('App通知标题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('APP')" :span="24">
          <el-form-item :label="$t('App通知内容')" prop="appNoticeContent">
            <el-input v-model="form.appNoticeContent" type="textarea" :placeholder="$t('App通知内容')" :autosize="{minRows: 3, maxRows: 20}" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('QYWX')" :span="12">
          <el-form-item :label="$t('企业微信通知标题')" prop="wechatNoticeTitle">
            <el-input v-model="form.wechatNoticeTitle" :placeholder="$t('企业微信通知标题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('QYWX')" :span="24">
          <el-form-item :label="$t('企业微信通知内容')" prop="wechatNoticeContent">
            <el-input v-model="form.wechatNoticeContent" type="textarea" :placeholder="$t('企业微信通知内容')" :autosize="{minRows: 3, maxRows: 20}" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('SMS')" :span="12">
          <el-form-item :label="$t('短信通知编码')" prop="smsNoticeCode">
            <el-input v-model="form.smsNoticeCode" :placeholder="$t('短信通知编码')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('DD')" :span="12">
          <el-form-item :label="$t('钉钉通知标题')" prop="dingTalkNoticeContent">
            <el-input v-model="form.dingTalkNoticeTitle" :placeholder="$t('钉钉通知标题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('DD')" :span="24">
          <el-form-item :label="$t('钉钉通知内容')" prop="dingTalkNoticeContent">
            <mavon-editor v-model="form.dingTalkNoticeContent" class="mavon-editor" :placeholder="$t('钉钉通知内容')" :toolbars-flag="false" :html="false" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <!--        <el-col v-if="form.noticeMode.includes('GZH')" :span="12">-->
        <!--          <el-form-item :label="$t('公众号通知标题')" prop="mpNoticeTitle">-->
        <!--            <el-input v-model="form.mpNoticeTitle" :placeholder="$t('公众号通知标题')" show-word-limit maxlength="100" />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col v-if="form.noticeMode.includes('GZH')" :span="12">
          <el-form-item :label="$t('公众号通知模板ID')" prop="mpTemplateId">
            <el-input v-model="form.mpTemplateId" :placeholder="$t('公众号通知模板ID')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.noticeMode.includes('GZH')" :span="24" style="margin-top: 10px;">
          <el-table v-loading="loading" class="mappingData" :data="form.mpMsgTemplateFieldMappingList" border tooltip-effect="darkTable">
            <el-table-column :label="$t('序号')" align="center" width="50">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('内置模板字段')" align="center" prop="sourceField">
              <template slot="header" slot-scope="{}">
                <span style="color: red">*</span>
                <span>{{ $t('内置模板字段') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'mpMsgTemplateFieldMappingList.' + scope.$index + '.sourceField'" :rules="listRules.sourceField">
                  <el-select v-model="scope.row.sourceField">
                    <el-option v-for="field in form.templateFieldList" :key="field.id" :value="field.fieldName" :label="field.fieldName" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('第三方模板字段')" align="center" prop="toField">
              <template slot="header" slot-scope="{}">
                <span style="color: red">*</span>
                <span>{{ $t('第三方模板字段') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'mpMsgTemplateFieldMappingList.' + scope.$index + '.toField'" :rules="listRules.toField">
                  <el-input v-model="scope.row.toField" :placeholder="$t('第三方模板字段')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('备注')" align="center" prop="remark">
              <template slot-scope="scope">
                <el-form-item>
                  <el-input v-model="scope.row.remark" :placeholder="$t('备注')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteWXFieldMappingHandle(scope.$index, scope.row)"
                >{{ $t('删除') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tol">
            <el-button style="margin-top: 10px;" size="mini" icon="el-icon-plus" type="primary" @click="addMappingField">{{ $t("添加") }}</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="area-header">
        <span class="area-header-title">{{ $t('关键字列表') }}</span>
      </div>
      <el-table class="nowrapTable formTable" :data="form.templateFieldList" border>
        <el-table-column :label="$t('序号')" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('字段名称')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('字段名称') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'templateFieldList.' + scope.$index + '.fieldName'" :rules="listRules">
              <el-input v-model="scope.row.fieldName" :placeholder="$t('字段名称')" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')" align="center">
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.remark" :placeholder="$t('备注')" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="delTemplate(scope.$index, scope.row)">{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addTemplate">{{ $t("添加") }}</el-button>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <SaveBtn has-permi="act:model" />
    </div>
  </div>
</template>

<script>
import EditorTxt from '@/components/Editor'
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
import { getWfActModelMsgTemplateByModelId, saveWfActModelMsgTemplate } from '@/api/act/model/actModel'

export default {
  components: {
    EditorTxt
  },
  data() {
    return {
      // 通知方式字典
      noticeModeOptions: [], // 表单参数
      form: {
        noticeMode: [],
        templateFieldList: [],
        mpMsgTemplateFieldMappingList: []
      },
      sysYesNoOption: [],
      // 遮罩层
      loading: false,
      // 表单校验
      rules: {
        reminderType: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], noticeMode: [
          { required: false, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], systemNoticeTitle: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], mailNoticeTitle: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], appNoticeTitle: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], wechatNoticeTitle: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], wechatNoticeContent: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], smsNoticeCode: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], systemNoticeContent: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], mailNoticeContent: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], appNoticeContent: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], dingTalkNoticeContent: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], dingTalkNoticeTitle: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], mpNoticeTitle: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ], mpTemplateId: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ]
      },
      listRules: {
        fieldName: [{ required: true, message: this.$t('必填字段'), trigger: 'blur' }],
        sourceField: [{ required: true, message: this.$t('必填字段'), trigger: 'blur' }],
        toField: [{ required: true, message: this.$t('必填字段'), trigger: 'blur' }]
      },
      sendUserEditor: {},
      ccUserEditor: {}
    }
  },
  created() {
    this.getDicts('sys_notice_type').then(response => {
      this.noticeModeOptions = response.data.filter(item => {
        return item.dictValue !== 'XTTX' && item.dictValue !== 'SMS'
      })
    })
    this.getDicts('sys_yes_no').then(response => {
      this.sysYesNoOption = response.data
    })
  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.modelId !== undefined) {
        getWfActModelMsgTemplateByModelId(data.modelId).then(response => {
          if (response.data) {
            this.form = response.data
          } else {
            this.reset()
            this.form.modelId = data.modelId
          }
          this.loading = false
        })
      } else {
        this.reset()
        this.loading = false
      }
    },
    addMappingField() {
      const obj = {
        sourceField: undefined,
        toField: undefined,
        remark: undefined
      }
      if (!(this.form.mpMsgTemplateFieldMappingList instanceof Array)) {
        this.$set(this.form, 'mpMsgTemplateFieldMappingList', [])
      }
      this.form.mpMsgTemplateFieldMappingList.push(obj)
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        modelId: undefined,
        reminderType: 'XTMR',
        noticeMode: [],
        systemNoticeTitle: undefined,
        systemNoticeContent: undefined,
        mailNoticeTitle: undefined,
        mailNoticeContent: undefined,
        appNoticeTitle: undefined,
        appNoticeContent: undefined,
        wechatNoticeTitle: undefined,
        wechatNoticeContent: undefined,
        smsNoticeCode: undefined,
        dingTalkNoticeTitle: undefined,
        dingTalkNoticeContent: undefined,
        mpNoticeTitle: undefined,
        mpTemplateId: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        templateFieldList: [],
        mpMsgTemplateFieldMappingList: []
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.actModelMsgTemplateOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.actModelMsgTemplateOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveWfActModelMsgTemplate(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    },
    addTemplate() {
      const row = {
        id: undefined,
        fieldName: undefined,
        remark: undefined
      }
      if (!(this.form.templateFieldList instanceof Array)) {
        this.$set(this.form, 'templateFieldList', [])
      }
      this.$nextTick(() => {
        this.form.templateFieldList.push(row)
      })
    },
    // 根据通知方式展示不同的组件
    noticeModeChange(val) {
      if (!val.includes('XTTX')) {
        this.form.systemNoticeTitle = undefined
        this.form.systemNoticeContent = undefined
      }
      if (!val.includes('EMAIL')) {
        this.form.mailNoticeTitle = undefined
        this.form.mailNoticeContent = undefined
      }
      if (!val.includes('APP')) {
        this.form.appNoticeTitle = undefined
        this.form.appNoticeContent = undefined
      }
      if (!val.includes('SMS')) {
        this.form.smsNoticeCode = undefined
      }
      if (!val.includes('QYWX')) {
        this.form.weChatNoticeTitle = undefined
        this.form.weChatNoticeContent = undefined
      }
    },
    // 删除关键字列表
    delTemplate(index) {
      this.form.templateFieldList.splice(index, 1)
    },
    // 删除微信公众号字段映射列表
    deleteWXFieldMappingHandle(index) {
      this.form.mpMsgTemplateFieldMappingList.splice(index, 1)
    }
  }

}
</script>

<style scoped lang="scss">
/deep/.mavon-editor li {
  list-style: unset !important;
}
/deep/.mappingData .el-form-item{
  min-height: unset;
}
/deep/.mappingData .el-form-item.is-error{
  min-height: 55px;
}
</style>
